<template>
    <div class="wrap" @click="apply(content)" title="点击应用">
        <div class="gausu" :style="{backgroundImage: img}"></div>
        <div class="view" :style="{backgroundImage: img}"></div>
        <div class="preview-button icon icon-view" @click.stop="preview" title="预览"></div>
        <div class="attr">
            <div class="tit">{{title}}</div>
            <div class="other">{{desc}}</div>
        </div>
    </div>  
</template>

<script>
import {mapMutations} from 'vuex'

export default {
    name: 'prod-item',
    props: {
        img: String,
        title: String,
        desc: String,
        content: String,
        id: [String, Number]
    },
    methods: {
        ...mapMutations(['setMetadata', 'setElement', 'setPageIndex', 'pushHistory']),
        apply(data) {
            try {
                this.setElement(null)
                this.pushHistory('保存')
                this.setPageIndex(0)
                
                // 根据API返回的数据格式，content字段是JSON字符串，需要解析
                let parsedData;
                if (typeof data === 'string') {
                    // 如果是字符串，则尝试解析
                    parsedData = JSON.parse(data)
                } else if (typeof data === 'object' && data !== null) {
                    // 如果已经是对象，则检查是否有content字段
                    if (data.content) {
                        // 如果有content字段，说明是数据库记录格式，需要解析content
                        parsedData = JSON.parse(data.content)
                    } else {
                        // 否则直接使用
                        parsedData = data
                    }
                } else {
                    // 其他情况抛出错误
                    throw new Error('无效的数据格式')
                }
                
                // 确保parsedData有正确的结构
                if (!parsedData.pages) {
                    throw new Error('数据缺少必需的pages字段')
                }
                
                this.setMetadata(parsedData)
                this.pushHistory('应用新示例')
            } catch(e) {
                console.error('应用项目数据失败:', e)
                this.$message.error('应用项目数据失败: ' + e.message)
            }
        },
        preview(event) {
            // 阻止事件冒泡，避免触发apply方法
            event.stopPropagation();
            // 跳转到预览页面
            window.open(`/preview.html?id=${this.id}`, '_blank');
        }
    }
}
</script>

<style lang="scss" scoped>
@import "../assets/scss/variables";

.wrap {
    cursor: pointer;
    position: relative;
    margin: 0 0.5rem 0.5rem;
    display: inline-flex;
    list-style: none;
    flex-direction: column;
    width: calc(100% - 1rem);
    height: auto;
    border-radius: 0.3rem;
    overflow: hidden;
    border: 1px solid $cborder;
    box-sizing: border-box;
    .gausu {
        position: absolute;
        width: 100%;
        height: 100%;
        background-position: center;
        background-size: cover;
        filter: blur(20px);
        opacity: 0.6;
    }
    .view {
        position: relative;
        width: 100%;
        padding-top: 56.25%;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }
    .preview-button {
        position: absolute;
        top: 5px;
        right: 5px;
        width: 30px;
        height: 30px;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 16px;
        z-index: 10;
        cursor: pointer;
        
        &:hover {
            background-color: rgba(0, 0, 0, 0.7);
        }
    }
    .attr {
        display: flex;
        position: relative;
        flex: 1;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background-color: $cprimary;
        padding: 0.5rem 0;
        .tit {
            font-size: 0.8rem;
            margin-bottom: 0.2rem;
            color: $chigh;
            text-align: center;
        }
        .other {
            font-size: 0.6rem;
            color: $clightfont;
            text-align: center;
        }
    }
}
</style>